<template>
    <div>
        <div class="textcenter outdiv">
            <button class="btn" @click="drawer = true" :class="{show:isShow}">你有{{num}}条未读消息</button>
        </div>
        <el-drawer title="未读消息列表" :visible.sync="drawer" direction="rtl" :before-close="handleClose">
            <el-table :data="weidu" height="250" border style="width: 100%">
                <el-table-column prop="informationDes" label="推送内容">
                </el-table-column>
                <el-table-column prop="information_time" label="推送时间" width="180">
                </el-table-column>
                <el-table-column prop="pusherName" label="推送者" width="120">
                </el-table-column>
            </el-table>
        </el-drawer>
        <div class="outdiv biaoti">已读消息</div>
        <hr style="height:1px;border: none;border-top:1px solid #ddd;margin:15px 0;">

        <div class="outdiv">
            <el-table :data="yidu" height="250" border style="width: 100%">
                <el-table-column prop="informationDes" label="推送内容">
                </el-table-column>
                <el-table-column prop="information_time" label="推送时间" width="180">
                </el-table-column>
                <el-table-column prop="pusherName" label="推送者" width="120">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import * as api from '../../utils/api'
    export default {
        name: 'carNews',
        data() {
            return {
                drawer: false,
                num: 1,
                isShow: true,
                weidu: [],
                yidu: []
            }
        },
        created() {
            this.getmsg()
            this.changeShow()
            this.getreadmsg()
        },
        updated() {
            // this.changeShow()
        },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done( /* 改变状态 */
                            this.axios({
                                url: api.GET_CHANGEREADINFO,
                                method: 'get',
                                params: {
                                    user_id: 3
                                }
                            }).then(data => {
                                if (data.data.code == 200) {
                                    this.getmsg()
                                    this.getreadmsg()
                                }
                            }));

                    })
                    .catch(_ => {});
            },
            getmsg() {
                this.axios({
                    url: api.GET_QUERYUNREDINFO,
                    method: 'get',
                    params: {
                        user_id: 3
                    }
                }).then(data => {
                    // console.log(data)
                    if (data.data.data == null) {
                        this.num = 0
                    } else {
                        this.weidu = data.data.data
                        this.num = this.weidu.length
                    }
                })
            },
            getreadmsg() {
                this.axios({
                    url: api.GET_QUERYREDINFO,
                    method: 'get',
                    params: {
                        user_id: 3
                    }
                }).then(data => {
                    // console.log(data)
                    this.yidu = data.data.data
                })
            },
            changeShow() {
                this.num >= 1 ? this.isShow = false : this.isShow = true
            }
        },
    }
</script>

<style lang='less' scoped>
    .show {
        visibility: hidden;
    }
    .btn{
        border-radius: 2rem;
        border: 0;
        padding: 1rem;
        outline: none;
        cursor: pointer;
        background: #7db1e6;
    }
    h2 {
        padding: 2rem 0 2rem 3rem;
        color: #000;
    }
</style>